<template>

  <div class="card table-main">
    <div class="flx-justify-between send-input">

      <el-input
          size="large"
          v-model="props.currentInterface.path"
          :placeholder='$t("interface.UrlInputPlaceholder")'
          class="input-with-select"
      >
        <template #prepend>
          <!--          'primary' PUT | 'success' GET | 'warning' POST | 'danger' DELETE | 'info' PATCH-->
          <el-select size="large" v-model="props.currentInterface.method" style="width: 115px">
            <el-option label="GET" value="GET"/>
            <el-option label="POST" value="POST"/>
            <el-option label="PATCH" value="PATCH"/>
            <el-option label="PUT" value="PUT"/>
            <el-option label="DELETE" value="DELETE"/>
            <el-option label="HEAD" value="HEAD"/>
            <el-option label="OPTIONS" value="OPTIONS"/>

          </el-select>
        </template>
      </el-input>
      <el-button :icon="Search" type="primary"
                 @click="sendRequest"
                 size="large" style="margin-left: 12px">{{ $t("interface.send") }}
      </el-button>
      <el-button :icon="Search"
                 @click="saveRequest"
                 size="large">{{ $t("interface.save") }}
      </el-button>

    </div>


    <!--https://antoniandre.github.io/splitpanes/-->
<!--    <splitpanes :class="maximize?'custom-splitpanes-theme-max':'custom-splitpanes-theme-min'" horizontal @resize="paneSize = $event[0].size">-->

    <splitpanes class="custom-theme"
                :class="maximize?'custom-splitpanes-theme-max':'custom-splitpanes-theme-min'"
                horizontal @resize="paneSize = $event[0].size">
      <pane min-size="20" :size="paneSize">
        <div class="interfaceTabs">
          <el-tabs v-model="activeName" class="interface-cus-tabs">

            <!--          parameters-->
            <el-tab-pane :label='$t("interface.parameters")' name="params">
              <el-table :data="[{}]" :show-header="false" style="width: 100%">
                <el-table-column width="180">
                  <template #default="scope">
                    <el-text>{{ $t("interface.queryParameters") }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column/>
                <el-table-column width="200">
                  <template #default="scope">
                    <div class="flx-justify-end">
                      <el-button :icon="Plus" @click="addParams(props.currentInterface.parameters.Params)" circle/>
                      <el-button :icon="Edit" circle/>
                      <el-button :icon="Delete" circle/>
                      <el-tooltip effect="light" content="说明文档" placement="top">
                        <el-button :icon="InfoFilled" circle @click=""/>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <el-table :data="props.currentInterface.parameters.Params"
                        height="calc(100% - 25px)"
                        border :show-header="false"
                        style="width: 100%">
                <el-table-column label="key">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.key" placeholder="请输入key" clearable></CustomInput>
                  </template>
                </el-table-column>
                <el-table-column label="value">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.value" placeholder="请输入value" clearable></CustomInput>
                  </template>
                </el-table-column>
                <el-table-column label="description">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.description" placeholder="请输入描述" clearable></CustomInput>
                  </template>
                </el-table-column>
                <!--                请求参数 操作列 -->
                <el-table-column width="100">
                  <template #default="scope">
                    <div class="operation-column">
                      <el-switch
                          v-model="scope.row.enable"
                          inline-prompt
                          :active-icon="Check"
                          :inactive-icon="Close"
                      />
                      <!--                      <el-icon class="delete-icon">-->
                      <!--                        <Delete/>-->
                      <!--                      </el-icon>-->
                      <el-button size="small"
                                 style="margin-left: 10px"
                                 :icon="Delete" circle/>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>


            <!--            headers-->
            <el-tab-pane :label='$t("interface.headers")' name="headers">
              <el-table
                  height="50px"
                  :data="[{}]" :show-header="false" style="width: 100%">
                <el-table-column width="180">
                  <template #default="scope">
                    <el-text>{{ $t("interface.headers") }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column/>
                <el-table-column width="200">
                  <template #default="scope">
                    <div class="flx-justify-end">
                      <el-button :icon="Plus" @click="addHeaders(props.currentInterface.parameters.Headers)" circle/>
                      <el-button :icon="Edit" circle/>
                      <el-button :icon="Delete" circle/>
                      <el-tooltip effect="light" content="说明文档" placement="top">
                        <el-button :icon="InfoFilled" circle @click=""/>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-table :data="props.currentInterface.parameters.Headers"
                        height="calc(100% - 25px)"
                        border :show-header="false"
                        style="width: 100%">
                <el-table-column label="key">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.key" placeholder="请输入key" clearable></CustomInput>
                  </template>
                </el-table-column>
                <el-table-column label="value">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.value" placeholder="请输入value" clearable></CustomInput>
                  </template>
                </el-table-column>
                <el-table-column label="description">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.description" placeholder="请输入描述" clearable></CustomInput>
                  </template>
                </el-table-column>

                <!--                请求头 操作列 -->
                <el-table-column width="100">
                  <template #default="scope">
                    <div class="operation-column">
                      <el-switch
                          v-model="scope.row.enable"
                          inline-prompt
                          :active-icon="Check"
                          :inactive-icon="Close"
                      />
                      <el-button size="small"
                                 style="margin-left: 10px"
                                 :icon="Delete" circle/>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!--          body-->
            <el-tab-pane :label='$t("interface.body")' name="body">
              <el-table :data="[{}]" :show-header="false" style="width: 100%">
                <el-table-column width="400">
                  <template #default="scope">
                    <div class="flx-justify-start body-content-type">
                      <el-text>{{ $t("interface.body") }} Content Type :</el-text>
                      <el-text></el-text>
                      <el-select v-model="props.currentInterface.requestBody.type" placeholder="Select">
                        <el-option-group
                            v-for="group in bodyTypeOptions"
                            :key="group.label"
                            :label="group.label"
                        >
                          <el-option
                              v-for="item in group.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-option-group>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column/>
                <el-table-column width="200">
                  <template #default="scope">
                    <div class="flx-justify-end">
                      <el-button
                          v-if="props.currentInterface.requestBody.type==='application/x-www-form-urlencoded' || props.currentInterface.requestBody.type==='application/form-data'"
                          @click="addBodyFormData(props.currentInterface.requestBody.form_data)"
                          :icon="Plus" circle/>
                      <el-button
                          v-if="props.currentInterface.requestBody.type==='application/x-www-form-urlencoded' || props.currentInterface.requestBody.type==='application/form-data'"
                          :icon="Edit" circle/>
                      <el-button :icon="Delete" circle/>
                      <el-tooltip effect="light" content="说明文档" placement="top">
                        <el-button :icon="InfoFilled" circle @click=""/>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!--              请求body类型为application/json-->
              <div v-if="props.currentInterface.requestBody.type==='application/json'"
                   class="code-main flx-column-justify-start">
                <AceEditor v-model:value="props.currentInterface.requestBody.text"
                           lang="json"></AceEditor>
              </div>

              <!--              请求body类型为application/xml-->
              <div v-if="props.currentInterface.requestBody.type==='application/xml'"
                   class="code-main flx-column-justify-start">
                <AceEditor v-model:value="props.currentInterface.requestBody.text"
                           lang="xml"></AceEditor>
              </div>
              <!--              请求body类型为application/html-->
              <div v-if="props.currentInterface.requestBody.type==='text/html'"
                   class="code-main flx-column-justify-start">
                <AceEditor v-model:value="props.currentInterface.requestBody.text"
                           lang="html"></AceEditor>
              </div>
              <!--              请求body类型为application/plain-->
              <div v-if="props.currentInterface.requestBody.type==='text/plain'"
                   class="code-main flx-column-justify-start">
                <AceEditor v-model:value="props.currentInterface.requestBody.text"
                           lang="text"></AceEditor>
              </div>

              <!--              请求body类型为form-data,x-www-form-urlencoded-->
              <el-table
                  v-if="props.currentInterface.requestBody.type==='application/x-www-form-urlencoded' || props.currentInterface.requestBody.type==='application/form-data' "
                  :data="props.currentInterface.requestBody.form_data"
                  height="calc(100% - 25px)"
                  border :show-header="false"
                  style="width: 100%">
                <el-table-column label="key">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.key" placeholder="请输入key" clearable></CustomInput>
                  </template>
                </el-table-column>
                <el-table-column label="value">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.value" placeholder="请输入value" clearable></CustomInput>
                  </template>
                </el-table-column>
                <el-table-column label="description">
                  <template #default="scope">
                    <CustomInput v-model="scope.row.description" placeholder="请输入描述" clearable></CustomInput>
                  </template>
                </el-table-column>

                <!--                 form-data,x-www-form-urlencoded 数据操作列 -->
                <el-table-column width="100">
                  <template #default="scope">
                    <div class="operation-column">
                      <el-switch
                          v-model="scope.row.enable"
                          inline-prompt
                          :active-icon="Check"
                          :inactive-icon="Close"
                      />
                      <el-button size="small"
                                 style="margin-left: 10px"
                                 :icon="Delete" circle/>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>

            <!--          auth-->
            <el-tab-pane :label='$t("interface.auth")' name="auth">
              <el-table :data="[{}]" :show-header="false" style="width: 100%">
                <el-table-column width="400">
                  <template #default="scope">
                    <div class="flx-justify-start body-content-type">
                      <el-text>{{ $t("interface.auth") }} Type :</el-text>
                      <el-text></el-text>
                      <el-dropdown :hide-on-click="false">
                      <span class="el-dropdown-link">
                        None<el-icon class="el-icon--right"><arrow-down/></el-icon>
                      </span>

                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item>None</el-dropdown-item>
                            <el-dropdown-item>Inherit</el-dropdown-item>
                            <el-dropdown-item>Basic Auth</el-dropdown-item>
                            <el-dropdown-item>Bearer Token</el-dropdown-item>
                            <el-dropdown-item>API Key</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>

                  </template>
                </el-table-column>
                <el-table-column/>
                <el-table-column width="200">
                  <template #default="scope">
                    <div class="flx-justify-end">
                      <el-button :icon="Plus" circle/>
                      <el-button :icon="Edit" circle/>
                      <el-button :icon="Delete" circle/>
                      <el-tooltip effect="light" content="说明文档" placement="top">
                        <el-button :icon="InfoFilled" circle @click=""/>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!--          preProcessors-->
            <el-tab-pane :label='$t("interface.preProcessors")' name="preProcessors">
              <el-table :data="[{}]" :show-header="false" style="width: 100%">
                <el-table-column width="180">
                  <template #default="scope">
                    <el-text>{{ $t("interface.preProcessors") }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column/>
                <el-table-column width="200">
                  <template #default="scope">
                    <div class="flx-justify-end">
                      <el-button :icon="Delete" circle/>
                      <el-tooltip effect="light" content="说明文档" placement="top">
                        <el-button :icon="InfoFilled" circle @click=""/>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="code-main flx-column-justify-start">
                <AceEditor v-model:value="props.currentInterface.preProcessors"
                           lang="python"></AceEditor>
                <div class="code-side">
                  <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item title="变量相关" name="1">
                      <div class="flx-column-justify-start">
                        <span><el-button type="primary" size="small" link> 设置局部变量 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取局部变量 </el-button></span>
                        <span><el-button type="primary" size="small" link> 设置全局变量 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取全局变量 </el-button></span>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="请求相关" name="2">
                      <div class="flx-column-justify-start">
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="代码相关" name="3">
                      <div class="flx-column-justify-start">
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>

            </el-tab-pane>

            <!--          postProcessors-->
            <el-tab-pane :label='$t("interface.postProcessors")' name="postProcessors">
              <el-table :data="[{}]" :show-header="false" style="width: 100%">
                <el-table-column width="180">
                  <template #default="scope">
                    <el-text>{{ $t("interface.postProcessors") }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column/>
                <el-table-column width="200">
                  <template #default="scope">
                    <div class="flx-justify-end">
                      <el-button :icon="Delete" circle/>
                      <el-tooltip effect="light" content="说明文档" placement="top">
                        <el-button :icon="InfoFilled" circle @click=""/>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>


              <div class="code-main flx-column-justify-start">
                <AceEditor v-model:value="props.currentInterface.postProcessors"
                           lang="python"></AceEditor>
                <div class="code-side">
                  <span><el-button type="primary" size="small" link> 设置局部变量 </el-button></span>
                  <span><el-button type="primary" size="small" link> 获取局部变量 </el-button></span>
                  <span><el-button type="primary" size="small" link> 设置全局变量 </el-button></span>
                  <span><el-button type="primary" size="small" link> 获取全局变量 </el-button></span>
                  <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>

                  <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item title="变量相关" name="1">
                      <div class="flx-column-justify-start">
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="请求相关" name="2">
                      <div class="flx-column-justify-start">
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="代码相关" name="3">
                      <div class="flx-column-justify-start">
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                        <span><el-button type="primary" size="small" link> 获取请求体 </el-button></span>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>


            </el-tab-pane>
            <el-tab-pane label='设置' name="setting">
              <div class="setting-container">
                <el-form>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="接口名称">
                        <el-input v-model.trim="props.currentInterface.name"
                                  clearable
                                  style="width: 200px"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="归属模块">
                        <el-switch></el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否重定向">
                        <el-switch></el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="SSL证书">
                        <el-switch></el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>


                </el-form>
              </div>

            </el-tab-pane>
          </el-tabs>
          <!--          操作接口TABS-->
          <envSelect v-model:envId="props.currentInterface.advancedSettings.env"></envSelect>
        </div>
      </pane>
      <pane :size="100 - paneSize">
        <div class="responseTabs">

          <el-tabs v-model="resultActiveTabs" class="response-tabs" @tab-click="handleClick">

            <el-tab-pane label='响应体' name="responseBody">
              <div class="response-body">
                <ReadAceEditor v-model:value="props.currentInterface.response_body"
                               lang="json" :readonly="true"></ReadAceEditor>

                <div class="response-body-side">
                  <el-button>复制</el-button>
                  <el-button>下载</el-button>

                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label='响应头' name="responseHeaders">
              <div class="response-body">
                <ReadAceEditor v-model:value="props.currentInterface.response_headers"
                               lang="json" :readonly="true"></ReadAceEditor>

                <div class="response-body-side">
                  <el-button>复制</el-button>
                  <el-button>下载</el-button>

                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label='断言' name="assertions">assertions</el-tab-pane>
            <el-tab-pane label='请求数据'  name="requestData">requestData</el-tab-pane>
            <el-tab-pane label='控制台' name="console">
              <div class="response-body">
                <ReadAceEditor v-model:value="props.currentInterface.console_out"
                               lang="python" :readonly="true"></ReadAceEditor>
                <div class="response-body-side">
                  <el-button>复制</el-button>
                  <el-button>下载</el-button>
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>

          <div class="response-status-container">
            <div>
              <span class="key">Status:</span>
              <span class="value">{{props.currentInterface.response_status}}</span>
            </div>
            <div>
              <span class="key">Time:</span>
              <span class="value">{{props.currentInterface.response_time}}ms</span>
            </div>
            <div>
              <span class="key">Size:</span>
              <span class="value">{{props.currentInterface.response_size}}</span>
            </div>
          </div>

          <el-button type="primary" link class="response-isOpen-button" @click="closeSplitPane">
            {{ "收起" }}
            <el-icon class="el-icon--right">
              <component :is="ArrowDown"></component>
            </el-icon>
          </el-button>

        </div>
      </pane>
    </splitpanes>
  </div>

</template>


<script setup>

import {
  InfoFilled,
  Refresh,
  Search,
  Delete,
  Edit,
  Plus,
  ArrowDown,
  ArrowUp,
  Check,
  Close
} from "@element-plus/icons-vue";
import {defineAsyncComponent, ref, watch} from "vue";

import {Splitpanes, Pane} from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

import CustomInput from '@/components/CustomInput/index.vue'
import envSelect from './envSelect.vue'
import AceEditor from '@/components/AceEditor/editorIndex.vue'
import ReadAceEditor from '@/components/AceEditor/index.vue'

import { useGlobalStore } from "@/stores/modules/global";
import {storeToRefs} from "pinia";

const globalStore = useGlobalStore();
const {maximize}  = storeToRefs(globalStore)

const props = defineProps({
  currentInterface: {
    type: Object
  }
})

const emits = defineEmits(["sendRequest", "saveRequest"])


const input3 = ref('233')
const select = ref('GET')
const value2 = ref(true)
const activeNames = ref("")

// params ,header,等TAB页
const activeName = ref('params')

const handleClick = (tab, event) => {
  // console.log(tab, event)
}

// body的content-type枚举
const bodyTypeValue = ref('')
const bodyTypeOptions = [
  {
    options: [
      {
        value: 'None',
        label: 'None',
      }
    ],
  },
  {

    label: 'Text',
    options: [
      {
        value: 'application/json',
        label: 'application/json',
      },
      {
        value: 'application/xml',
        label: 'application/xml',
      },
    ],
  },
  {
    label: 'Structured',
    options: [
      {
        value: 'application/x-www-form-urlencoded',
        label: 'application/x-www-form-urlencoded',
      },
      {
        value: 'application/form-data',
        label: 'application/form-data',
      }, {
        value: 'application/octet-stream',
        label: 'application/octet-stream',
      }
    ],
  },
  {
    label: 'Others',
    options: [
      {
        value: 'text/html',
        label: 'text/html',
      },
      {
        value: 'text/plain',
        label: 'text/plain',
      }
    ],
  },
]


const handleChange = () => {

}

// 添加ParamsItem
const addParams = (Params) => {
  Params.push({
    key: "",
    value: "",
    description: "",
    enable: true
  })
}

// 添加HeadersItem
const addHeaders = (Headers) => {
  Headers.push({
    key: "",
    value: "",
    description: "",
    enable: true
  })
}

// 添加HeadersItem
const addBodyFormData = (formData) => {
  formData.push({
    key: "",
    value: "",
    description: "",
    enable: true
  })
}

// 发送请求
const sendRequest = () => {
  emits("sendRequest", props.currentInterface)
}

// 保存请求
const saveRequest = () => {
  emits("saveRequest", props.currentInterface)
}


// 响应的展示选中的TABS。
const resultActiveTabs = ref("responseBody")
// splitpanes 的高度
const paneSize = ref(100)

// 点击收起按钮，收起响应Split
const closeSplitPane = ()=>{
  paneSize.value = 100
}

watch(()=>props.currentInterface.response_id,()=>{
//   如果有响应值，则判断是否收起,如果结果的高度小于20，则设置为50
  if (paneSize.value > 80){
    paneSize.value = 50
  }
})

</script>

<style lang="scss">
@import "index.scss";

</style>
